<template>
    <el-dialog v-draggable title="配置" :visible.sync="dialogVisible" width="40%" @close="onClose()">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="设备电压" name="1">
            </el-tab-pane>
            <el-tab-pane label="设备电流" name="2">
            </el-tab-pane>
            <el-tab-pane label="设备功率" name="3">
            </el-tab-pane>
            <el-tab-pane label="总功率" name="4">
            </el-tab-pane>
            <el-tab-pane label="总用电量" name="5">
            </el-tab-pane>
        </el-tabs>
        <div>
            <span class="my_span">选择设备</span>
            <el-select v-model="value" placeholder="请选择" class="ml-3">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <el-table :data="tableData" border class="my_table" height="40vh" @selection-change="handleSelectionChange">
            <el-table-column prop="parameterName" label="参数名称" align="center">
            </el-table-column>
            <el-table-column prop="parameterCode" label="参数代码" align="center">
            </el-table-column>
            <el-table-column prop="parameterValue" label="参数值" align="center">
            </el-table-column>
            <el-table-column prop="parameterValueName" label="参数值名称" align="center">
            </el-table-column>
            <el-table-column type="selection" width="70" align="center">
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onSave">保 存</el-button>
            <el-button @click="onClose()">取 消</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    data () {
        return {
            value: '',
            options: [],
            tableData: [],
            multipleSelection: [],
            dialogVisible: false,
        }
    },
    methods: {
        onSave () {
            if (this.multipleSelection.length == 0) return this.$message.error('请选择数据！')
        },
        handleSelectionChange (val) {
            this.multipleSelection = val.map(item => item.parameterCode)
            console.log(this.multipleSelection)
        },
        onClose () {
            this.value = ''
            this.options = []
            this.tableData = []
            this.multipleSelection = []
            this.dialogVisible = false
        },
    },
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog {
    border-radius: 8px;

    .el-dialog__footer {
        text-align: center !important;
    }
}

::v-deep .el-dialog__header {
    border-radius: 8px 8px 0 0;
    background-color: #e6e6e6;
}

.ml-3 {
    margin-left: 12px;
}


.my_span {
    font-size: 16px;
}

.my_table {
    margin-top: 16px;
}

.dialog-foote {
    text-align: center;
}

// ::v-deep .el-table {

//     tr th {
//         background-color: #e6e6e6;
//         border-right: none;
//     }
// }
</style>